In Svelte, stores provide a reactive way to share state across multiple components without passing props through intermediate components. By creating a store outside of any component, you can import and use it wherever needed, keeping all components in sync automatically.
Both components automatically reflect the same store value. Updating the store in one component triggers reactive updates in all other components using that store, thanks to Svelte's reactivity system with $store syntax.
Multiple components need access to the same piece of state.
Passing props through several layers would be cumbersome.
You want centralized logic or helper methods for state management.
You need reactive updates across unrelated components.
Keep stores outside component scope to make them truly global or shared.
Use
$storesyntax inside components for automatic subscriptions and reactive updates.Encapsulate complex logic in custom stores with helper methods to keep components clean.
For temporary or route-specific state, consider creating stores inside components to avoid unnecessary global state.